<template>
  <view class="player-container">
    <!-- 歌曲信息 -->
    <view class="song-info">
      <text class="song-title">{{ currentSong.title }}</text>
      <text class="song-artist">{{ currentSong.artist }}</text>
    </view>

    <!-- 收藏按钮 -->
    <view class="favorite-btn" @click="toggleFavorite">
      <text :class="['icon-heart', { 'active': isFavorite }]"></text>
    </view>

    <!-- 播放控制 -->
    <view class="controls">
      <!-- 播放控制代码 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentSong: {
        id: '',
        title: '歌曲名称',
        artist: '歌手'
      },
      isFavorite: false
    }
  },
  methods: {
    async toggleFavorite() {
      try {
        const res = await uni.request({
          url: '/api/favorite',
          method: 'POST',
          data: {
            songId: this.currentSong.id,
            action: this.isFavorite ? 'remove' : 'add'
          }
        })
        
        if (res[0].statusCode === 200) {
          this.isFavorite = !this.isFavorite
          uni.showToast({
            title: this.isFavorite ? '已收藏' : '已取消收藏',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('收藏操作失败:', error)
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style>
.favorite-btn {
  margin: 20px 0;
  text-align: center;
}

.icon-heart {
  font-size: 24px;
  color: #999;
}

.icon-heart.active {
  color: red;
}
</style>